<template>
  <div>
    <div style="display: flex;justify-content: space-between">
      <div>
        <el-input  prefix-icon="el-icon-search"
                   placeholder="请输入员工名进行搜索..."
                   v-model="searchValue.name"
                   @keydown.enter.native="initData"
                   clearable
                   @clear="initData"
                   style="width: 200px;"></el-input>
        <span style="margin-left: 10px">
            奖罚日期:
            <el-date-picker
              v-model="searchValue.beginDateScope"
              type="daterange"
              value-format="yyyy-MM-dd"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </span>
        <el-button type="primary"
                   icon="el-icon-search"
                   @click="initData">搜索
        </el-button>
      </div>
    </div>
    <div style="margin-top: 10px">
      <el-table
        :data="entity"
        stripe
        border
        v-loading="loading"
        element-loading-text="正在加载..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        style="width: 100%">
        <el-table-column
          type="selection"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          fixed
          align="left"
        >
        </el-table-column>
        <el-table-column
          prop="trainContent"
          label="培训内容"
        >
        </el-table-column>
        <el-table-column
          prop="trainDate"
          align="left"
          label="培训日期">
        </el-table-column>
        <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="deleteRow(scope.row)" style="padding: 3px" size="mini"
                       type="danger">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;justify-content: flex-end">
        <el-pagination
          background
          @current-change="currentChange"
          @size-change="sizeChange"
          layout="sizes,prev,pager,next,jumper,->,total,slot" :total="total"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PerEc",
  data(){
    return{
      loading:false,
      total:0,
      entity:null,
      currentPage: 1,
      size: 10,
      searchValue:{
        name:'',
        beginDateScope:[]
      }
    }
  },
  create(){

  },
  mounted(){
    this.initData();
  },
  methods:{
    sizeChange(currentSize) {
      this.size = currentSize;
      this.initData();
    },
    currentChange(currentPage) {
      this.currentPage = currentPage;
      this.initData();
    },
    initData() {
      this.loading = true;
      let url = '/employee-train/getTrainList/?currentPage=' + this.currentPage + '&size=' + this.size;
      if (this.searchValue.name) {
        url += '&name=' + this.searchValue.name;
      }
      if (this.searchValue.beginDateScope) {
        url += '&beginDateScope=' + this.searchValue.beginDateScope;
      }
      this.getRequest(url).then(resp => {
        this.loading = false;
        if (resp) {
          console.log(resp)
          this.entity = resp.data;
          this.total = resp.total;
        }
      })
    },
    deleteRow(data){
      this.$confirm('此操作将永久删除该【' + data.name + '】, 的培训记录是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/employee-train/delete/' + data.id).then(resp => {
          if (resp) {
            this.initData();
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style scoped>

</style>
